<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .top {
      /* 缩略图	缩小3倍
				宽高之比:1.6
				缩略图是小放大镜的两倍 */
      /* width: 640px;
      height: 400px; */
      width: 282.5px;
      height: 282.5px;

      border: 1px solid;
      position: relative;
    }

    .top img {
      width: 100%;
      height: 100%;
    }

    /* 小放大镜 */
    .mark {
      width: 141px;
      height: 141px;
      background-color: #444;
      opacity: 0.5;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .bottom img {
      /* 原图 */
      width: 564px;
      height: 564px;
      position: absolute;
      left: 0;
      top: 0;
    }

    /* 大放大镜 */
    .bottom {
      background-color: #ffffff;
      width: 282px;
      height: 282px;
      border: 2px solid;
      position: relative;
      overflow: hidden;
      display: none;
    }
  </style>
</head>

<body>
  
  <div class="app" style="display:flex;">
    <div class="top">
      <!-- 缩略图 -->
      <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
      <!-- 小放大镜 -->
      <div class="mark"></div>
    </div>
    <!-- 大放大镜 -->
    <div class="bottom">
      <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
    </div>
  </div>



  <script type="text/javascript">
    /* 放大镜原理:
      原图宽高比例=缩略图宽高比例=放大镜宽高比例
      原图与大放大镜倍数比例=缩略图与小放大镜倍数比例
      小放大镜移动方式与原图移动方向相反,原图移动距离=-小放大镜移动距离*倍数 */
    //获取top节点
    var _top = document.querySelector(".top");
    // 获取小放大镜节点
    var _mark = document.querySelector(".mark");
    //获取原图节点
    var _rimg = document.querySelector(".bottom img");
    //获取bottom节点
    var _bottom = document.querySelector(".bottom");

    //鼠标悬停显示放大镜和原图
    _top.onmouseover = function () {
      _mark.style.display = "block";
      _bottom.style.display = "block";
    }
    // 鼠标离开时隐藏放大镜和原图
    _top.onmouseout = function () {
      _mark.style.display = "none";
      _bottom.style.display = "none";
    }

    // onmousemove:鼠标跟随事件
    _top.onmousemove = function (event) {

      //1.计算小放大镜的移动位置	//clientX	clientY：获取鼠标点距离浏览器的坐标
      //offsetLeft：距离左偏移量	clientWidth：可视宽
      var dx = event.clientX - _top.offsetLeft - _mark.clientWidth / 2;
      var dy = event.clientY - _top.offsetTop - _mark.clientHeight / 2;

      console.log(dx,"dx");
      //到最左边
      if (dx <= 0) {
        dx = 0;
      }
      //到最右边
      if (dx >= _top.clientWidth - _mark.offsetWidth) {
        console.log('111');
        
        dx = _top.clientWidth - _mark.offsetWidth;
      }

      //小放大镜的左、上距离
      _mark.style.left = dx + "px";

      //到最上边
      if (dy <= 0) {
        dy = 0;
      }
      //到最下边
      if (dy >= _top.clientHeight - _mark.offsetHeight) {
        dy = _top.clientHeight - _mark.offsetHeight;
      }
      _mark.style.top = dy + "px";
      //2.根据小放大镜的移动位置改变原图位置		原图是缩略图的3倍
      _rimg.style.left = -3 * dx + "px";
      _rimg.style.top = -3 * dy + "px";
    }
  </script>
</body>

</html>